import React from 'react';
import HeartLike from './heartlike'

const imgList = [require('../../../../assets/images/like/like01.png'),
require('../../../../assets/images/like/like02.png'),
require('../../../../assets/images/like/like03.png'),
require('../../../../assets/images/like/like04.png'),
require('../../../../assets/images/like/like05.png')];

/**
 * 二分屏点赞组件
 */

export default class Like extends React.Component {

    componentDidMount() {
        let ctx = this.canvas.getContext('2d');
        this.ctx = ctx;
        this.heartList = [];
        let domName = this.props.domName ? "." + this.props.domName : "body";
        let domElement = document.querySelector(domName);
        if(!domElement) {
            domElement = document.querySelector("body");
        }
        
        let offsetHeight = domElement.offsetHeight;
        
        // 这里是判断竖屏的话，取固定的高度
        if (this.props.domName === 'main-top-vertical') {
            offsetHeight = 450
        }
        
        ctx.canvas.width = 0;
        ctx.canvas.height = 0;
        this.wrapperWidth = 200;
        this.wrapperHeight = offsetHeight;
        this.heartCount = 0;
        this.add();
        this.loop();
    }

    componentWillUnmount() {
        this.heartList = [];
    }

    add = () => {
        for (let i = 0; i < 3; i++) {
            this.ctx.canvas.width = this.wrapperWidth;
            this.ctx.canvas.height = this.wrapperHeight;
            this.heartList.push(this.createHeart(this.heartCount++));
        }
    }
    
    loop = () => {
        this.ctx.clearRect(0, 0, this.wrapperWidth, this.wrapperHeight);
        this.heartList.forEach(item => {
            item && item.move(this.ctx);
        });
        if(this.heartList.length > 0) {
            requestAnimationFrame(this.loop);
        } else {
            this.props.finish && this.props.finish();
        }
    }

    getRandomDis() {
        if (Math.random() > 0.5) {
            return -(Math.random() * 43);
        } else {
            return +(Math.random() * 43);
        }
    }

    createHeart = index => {
        let positionArray = [{
            x: 15,
            y: this.wrapperHeight,
            endX: 30,
            endY: 50
        }];
        let img = new Image();
        let randomIndex = Math.floor(Math.random() * 4);
        img.src = imgList[randomIndex];
        let p1 = {
            x: 60 + this.getRandomDis(),
            y: 300 + this.getRandomDis()
        };
        let p2 = {
            x: 60 + this.getRandomDis(),
            y: 200 + this.getRandomDis()
        };
        return new HeartLike({
            id: index,
            x: positionArray[0].x,
            y: positionArray[0].y,
            endX: positionArray[0].endX,
            endY: positionArray[0].endY,
            onFadeOut: this.removeItem,
            width: 18,
            height: 18,
            image: img,
            bezierPoint: {
                p0: {
                    x: positionArray[0].x,
                    y: positionArray[0].y
                },

                p1: p1,
                p2: p2,
                p3: {
                    x: positionArray[0].endX,
                    y: positionArray[0].endY
                }
            }
        });

    }

    removeItem = item => {
        let index = this.heartList.findIndex(t => t.id === item.id);
        this.heartList.splice(index, 1);
    }
    
    render() {
        return <canvas width={0} height={0} className={this.props.className} ref={node => this.canvas = node}></canvas>;
    }
}